<%--
  Created by IntelliJ IDEA.
  User: asd73
  Date: 2017/9/23
  Time: 15:07
  To change this template use File | Settings | File Templates.
--%>
<%--微博发布留言--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style type="text/css">
        * {
            margin:0;
            padding:0;
            list-style: none;}
        .con {
            width: 600px;
            padding: 10px;
            margin: 100px auto;
            border: 1px solid #000000;}
        .con textarea {width: 460px;height: 169px;resize: none;}
        .con ul {
            width: 500px;
            margin:0 auto;}
        .con ul li { border-bottom: 1px dashed #cccccc;
            line-height: 32px;}
    </style>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            $('button').click(function () {
                var myMsg = $.trim($('textarea').val());//前后去掉空格
                if (myMsg == ''){
                    alert('评论内容不能为为空');
                }else if (myMsg.length >= 120){
                    alert('评论内容不能超过120个字');
                }else {
                    var msgLi = ('<li>' + myMsg + '</li>');
                    $('.con ul').prepend(msgLi);
                    $('.con ul li:first').hide().slideDown();
                }
                $('textarea').val('');
            })
        })
    </script>
</head>
<body>
    <div class="con">
        微博内容：<textarea></textarea> <button>发布</button>
        <ul>

        </ul>
    </div>
</body>
</html>
